// import * as React from 'react';
import * as React from 'react';
import { useState } from 'react';
import { Modal, Button } from 'antd';
import { useDispatch, useSelector } from "react-redux"


import Info from './Info/index';

import { ExclamationCircleOutlined } from '@ant-design/icons';



const Model = () => {
  const dispatch = useDispatch()
  const pushsel = useSelector((state: any) => state.getIn(["sr"]).toJS())
  // console.log(pushsel);
 
 
    //  函数组件hook
    const [visible, setVisible] = useState(false);


     const onOkback= ()=>{
      setVisible(false);
      dispatch({
        type: 'area',
        data: pushsel.area+1
    })
     }

    return (
        <>
      <Button type="primary" onClick={() => setVisible(true)}>
        新增区域
      </Button>
      <Modal
        title="新增区域"
        centered
        visible={visible}
        onOk={onOkback}
        onCancel={() => setVisible(false)}
        width={500}

        // title= 'Confirm'
        // icon ={<ExclamationCircleOutlined />}
        // content = 'Bla bla ...'
        okText= '确认'
        cancelText= '取消'
        
      >

     
        <h1>现存区域：{pushsel.area} 点击确认增加区域</h1>
        
        
      </Modal>
    </>
    );
}

export default Model;
